<template>
    <div>
        <el-dialog v-model="dialogShow" title="移动文件/文件夹" :width="480" 
            draggable align-center :close-on-click-modal="false" :before-close="dialogClose">
            <el-form :model="formData" :rules="formRules" ref="formRef" :inline="true" 
                label-position="left" require-asterisk-position="right">
                <el-form-item label="选择文件夹" prop="parantId" style="padding-top: 20px;">
                    <el-tree-select v-model="formData.parantId" :data="foldOptions" 
                        :render-after-expand="false" :check-strictly="true" :props="foldProps"
                        placeholder="请选择目标文件夹" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogClose">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import { myfileList, myfileListV2 } from "@/api/archives/myfile"
    const { proxy } = getCurrentInstance();
    const props = defineProps( [ 'show', 'data' ] );
    const emit = defineEmits( [ 'update:show', 'submit'] );
    const dialogShow = ref(false);
    const formData = ref({ parantId: '' });
    const formRules = ref({
        parantId: { required: true, trigger: ['change'], message: '请选择移动文件夹' },
    });
    const foldOptions = ref([]);
    const foldProps = ref({ label: 'folderName' });
    watch(() => props.show, () => { 
        dialogShow.value = props.show;
        if(props.show) {
            getList();
        }else{
            resetForm()
        }
    });
    const getList = () => {
        const defaultData = props.data || {};
        if(defaultData.type == '1'){
            myfileListV2({
                moveFileId: props.data.id
            }).then(res => {
                const foldList = res.data || [];
                foldList.map( item => item.value = item.id )
                foldOptions.value = proxy.handleTree(foldList, "id");
            });
            return
        }
        myfileList({
            moveFolderId: props.data.id
        }).then(res => {
            const foldList = res.data || [];
            foldList.map( item => item.value = item.id )
            foldOptions.value = proxy.handleTree(foldList, "id");
        });
    };
    const resetForm = () => {
        formData.value.parantId = '';
        proxy.resetForm("formRef");
    }; 
    const submitForm = () => {
        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                emit('submit', formData.value)
            }
        })
    };
    const dialogClose = () => {
        emit('update:show', false);
    };
</script>
<style scoped lang="scss">
    :deep(.el-dialog__body){
        padding: 0 20px;
    }
    :deep(.el-select){
        width: 360px;
    }
</style>